<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
<script src="/CHENG-ZAO-ZAO/js/vue.js"></script>
</head>
<body>
     <div id="app">
       <p>{{msg}}</p >
        <h2>{{names}}</h2>
        <button @click="btnClick()">button</button>
     </div>
<br>
   <script>
       let app = new Vue({
        el:"#app",
        data:{
             msg:'hello world',
             names:['kitty','tom','jerry','lucy']
        },
        methods:{
            btnClick(){
                // 数组的响应：通过下标修改数组中的值在vue中不响应，不是响应式

                // this.names[0]='Shane'

                // // push方法在数组末尾添加元素
                // this.names.push('lily')

                // pop方法在数组末尾删除元素
                // this.names.pop()

                // // shift方法可以删除数组中第一个元素
                // this.names.shift(),
                // // unshift方法可以在数组第一个位置添加元素
                // this.names.unshift('Shane')

                // splice方法splice(开始下标，删除个数，追加后面的元素)可以删除加入替换元素
                // this.names.splice(0,1,"Shane")

                // sort()排序、reverse()倒序
     
                // ...:扩展符
                // 编辑sum方法，总累加计算
                // let total = 0 
                function sum(...item){
                    // es5 for
                    for(let index=0; index < item.length;index++){
                        total = total + item[index]
                    }
                    return total

                }
                
                console.log(sum(1,2,3));


                // sun(1,2,3)
                // sun(1,2)

            

            }
        }
       })
    </script>
</body>
</html>